<template>
	<div class="page bgc-fff">
		<!-- title -->
		<div class="title-wrap pad-l-r42">
			<div class="f26 ta-l c-333 mt50 pad-t5">
				您好，
			</div>
			<div class="f16 ta-l c-999 mt20">
				<span v-show="!isRolesVal">欢迎使用中联物流运力平台,</span>
				<span v-show="isRolesVal">欢迎使用中联物流竞价平台</span>
				<!-- <br/> -->
				<span v-show="!isRolesVal">立即<span @click="toRegist" class="c-1E90FF">注册承运商</span>或者
					<span @click="toDirverRegist" class="c-1E90FF">加入承运商</span></span>
			</div>
		</div>
		<!-- input查询 -->
		<div class='login-input-wrap'>
			<!-- <input type="hidden" name="_csrf" id="order_csrf" value="<?php //echo Yii::$app->request->csrfToken?>"/> -->
			<div class="login-input-box">
				<div class="input-cells a-between">
					<!-- <div class="f-fl input-label">手机号码</div> -->
					<div class="flex l-center a-left">
						<input type="tel" class="pad-l20 cell-input cell-input-phone" placeholder="请输入手机号码" maxlength="11" v-model.trim="loginParam.phone"
						 @keyup="phoneKeyup" />
					</div>
					<img v-show="loginParam.phone" class="icon-delete" :src="staticImgData.imgurla" alt="" @click="cleanInput('phone')">
				</div>
				<div class="input-cells a-between mt10">
					<!-- <div class="f-fl input-label">验证码</div> -->
					<div class="flex l-center a-left">
						<input type="password" class="pad-l20 cell-input cell-input-vcode" placeholder="请输入登录密码" maxlength="18" v-model="loginParam.password" />
					</div>
					<img v-show="loginParam.password" class="icon-delete" :src="staticImgData.imgurla" alt="" @click="cleanInput('password')">
				</div>
			</div>
			<div>
				<p class="large-btn" :disabled="disabled" :class="[{'bgc-7cbdff':!disabled}]" @click="subAxios">登录</p>
			</div>
			<div class="flex a-right l-center pad15" v-show="!isRolesVal">
				<span class="mr15 f12 c-01a4f6">忘记密码？</span>
				<span class="f12 c-01a4f6" @click="toLoginSms">使用短信验证码登录</span>
			</div>
			<!-- <div class="flex a-center l-center mt50">
        <span class="line-left"></span>
        <span class="c-B2B2B2 f12" style="line-height:.15rem;">绑定手机即可登录接单</span>
        <span class="line-right"></span>
      </div> -->
		</div>

		<v-loading v-show="loadingShow" style="z-index:11"></v-loading>
	</div>
</template>

<script>
	import Loading from '@/components/common/loading/loading.vue'
	import { mapGetters } from 'vuex'
	import { Toast } from 'mint-ui'
	import util from '@/utils/util'
	import { getRolesVal } from '@/utils/store/token.js'
	// import * as AccountApi from '@/api/account'
	export default {
	  name: 'signup-normal',
	  data() {
	    return {
	      nums: 15,
	      staticImgData: {
	        imgurla: require('@/assets/image/common/icon_delete.png')
	      },
	      loginParam: {
	        phone: '',
	        password: ''
	      },
	      // loadingShow: 0, // loading显隐
	      disabled: true, // 登录禁止点击
	      loadingFail: false,
	      isRolesVal: ''
	    }
	  },
	  components: {
	    'v-loading': Loading
	  },
	  created() {
	    this.isRolesVal = getRolesVal()
	  },
	  computed: {
	    loginParamCom() {
	      const {
	        phone,
	        password,
	        passwords
	      } = this.loginParam
	      return {
	        phone,
	        password,
	        passwords
	      }
	    },
	    ...mapGetters(['loadingShow'])
	  },
	  watch: {
	    loginParamCom: {
	      handler: function(newValData) {
	        const that = this
	        const vala = newValData.phone.length
	        const valb = newValData.password
	        const vald = newValData.password.length
	        // console.log('address change: ', newValData, 'vala', vala, 'vald', vald)
	        if (vala === 11 && valb !== '' && vald > 5) {
	          that.disabled = false
	        } else {
	          that.disabled = true
	        }
	      },
	      deep: true
	    }
	  },
	  mounted() {

	  },
	  methods: {
	    cleanInput: function(val) {
	      const res_val = val
	      if (res_val === 'phone') {
	        this.loginParam.phone = ''
	      } else if (res_val === 'password') {
	        this.loginParam.password = ''
	      }
	    },
	    phoneKeyup: function() { // 电话号码输入框
	      const key = this.loginParam.phone.length
	      if (key === 13) {
	        this.code_prevent = true
	      } else {
	        this.code_prevent = false
	        this.telFormatting(this.loginParam.phone)
	      }
	    },
	    telFormatting: function(param) { // 电话号码格式化
	      let num = this.loginParam.phone
	      let num_ = this.loginParam.phone
	      num = num.replace(/\s/g, '').substring(0, 3).replace(/(.{3})/g, '$1')
	      num_ = num_.replace(/\s/g, '').substring(3).replace(/(.{4})/g, '$1')
	      this.loginParam.phone = num + num_
	      this.loginParam.phone = (num + num_).substring(0, 11)
	    },
	    subAxios: function() {
	      // 公共验证
	      const that = this
	      const mobile = that.loginParam.phone.replace(/\s/g, '')
	      const password = that.loginParam.password.replace(/\s/g, '')
	      const toParam = {
	        username: mobile,
	        password: password
	      }
	      const check_res = that.checkParam(toParam)
	      if (check_res) {
	        that.$store.dispatch('Login', toParam)
	      }
	    },
	    checkParam: function(checkParam) {
	      const {
	        username,
	        password
	      } = checkParam
	      if (username === '') {
	        Toast({
	          message: '请输入手机号码！'
	        })
	        return
	      }
	      if (password === '') {
	        Toast({
	          message: '请输入登录密码！'
	        })
	        return
	      }
	      const password_res = password.length
	      if (password_res < 6 || password_res > 20) {
	        Toast({
	          message: '请输入6-20位密码！'
	        })
	        return
	      }
	      const phone_res = util.checkMobile(username)
	      if (!phone_res) {
	        Toast({
	          message: '请输入有效的手机号码！'
	        })
	        return
	      }
	      return true
	    },
	    toRegist: function() {
	      this.$router.push({
	        name: 'company-signup'
	      })
	    },
	    toDirverRegist: function() {
	      this.$router.push({
	        name: 'driver-signup'
	      })
	    },
	    toLoginSms: function() {
	      this.$router.push({
	        name: 'signup-sms'
	      })
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	@import '../../styles/login_regist.css';

	.cell-input.pad-l20 {
		width: 2.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}

	.input-cells.a-between {
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-webkit-box-pack: justify;
		justify-content: space-between;
	}

	.input-cells>img {
		display: block;
		width: .32rem;
		height: .32rem;
		margin-right: 0;
		padding-right: 0.08rem;
	}
</style>
